<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> owner 管理 </title>

    <!--
        导入 js 和 element
    -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">

    <style>

        .el-row > .el-button {
            margin-bottom: 15px;
        }

    </style>
</head>
<body>

<div id="app">

    <el-input
            placeholder="电话:"
            prefix-icon="el-icon-search"
            v-model="tel"
            style="width: 32%;margin-bottom: 15px"
    >
    </el-input>
    <el-input
            placeholder="身份证号:"
            prefix-icon="el-icon-search"
            v-model="identity"
            style="width: 32%;margin-bottom: 15px"
    >

    </el-input>

    <el-button @click="search" type="success"> 搜索</el-button>

        <el-row>
            <el-button @click="addOwner" type="primary"> 添加</el-button>
            <el-button type="danger"> 多个删除</el-button>
        </el-row>

        <el-table
                ref="arr"
                :data="owners"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="业主姓名"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="tel"
                    label="联系方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="identity"
                    label="身份证"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="house.numbers"
                    label="房屋编号"
            >
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="primary" size="small">修改</el-button>
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>


        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="添加业主"
                :visible.sync="addDialogVisible"
                width="45%"
                @close="handlerClose">

            <el-form ref="owner" :model="owner" label-width="80px">

                <el-form-item label="业主姓名:">
                    <el-input v-model="owner.username"></el-input>
                </el-form-item>

                <el-form-item label="电话:">
                    <el-input v-model="owner.tel"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-radio v-model="owner.sex" label="男">男</el-radio>
                    <el-radio v-model="owner.sex" label="女">女</el-radio>
                </el-form-item>

                <el-form-item label="身份证号:">
                    <el-input v-model="owner.identity"></el-input>
                </el-form-item>

                <el-form-item label="房屋编号">
                    <el-select v-model="owner.houseId" placeholder="选择房子">
                        <el-option
                                v-for="house in houses"
                                :key="house.id"
                                :label="house.numbers"
                                :value="house.id">
                        </el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="备注信息">
                    <el-input type="textarea" v-model="owner.remarks"></el-input>
                </el-form-item>

            </el-form>

            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOwnerData"> 添加业主</el-button>

        </el-dialog>

        <el-dialog
            title="修改业主"
            :visible.sync="editDialogVisible"
            width="45%"
            @close="handlerUpdateClose">

        <el-form ref="updateOwner" :model="updateOwner" label-width="80px">

            <el-form-item label="业主姓名:">
                <el-input v-model="updateOwner.username"></el-input>
            </el-form-item>

            <el-form-item label="电话:">
                <el-input v-model="updateOwner.tel"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-radio v-model="updateOwner.sex" label="男">男</el-radio>
                <el-radio v-model="updateOwner.sex" label="女">女</el-radio>
            </el-form-item>

            <el-form-item label="身份证号:">
                <el-input v-model="updateOwner.identity"></el-input>
            </el-form-item>

            <el-form-item label="房屋编号">
                <el-select v-model="updateOwner.houseId" placeholder="选择房子">
                    <el-option
                            v-for="house in houses"
                            :key="house.id"
                            :label="house.numbers"
                            :value="house.id">
                    </el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="备注信息">
                <el-input type="textarea" v-model="updateOwner.remarks"></el-input>
            </el-form-item>

        </el-form>

        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOwnerData"> 修改业主</el-button>

    </el-dialog>

</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            tel: "",
            identity: "",
            owners: [],
            arr: [],

            //分页数据
            currentPage: 1,
            pageSizes: [2, 3, 4],
            pageSize: 2,
            total: 0,

            // 添加的dialog 操作

            addDialogVisible: false,
            editDialogVisible:false,
            owner: {
                sex:'男'
            },
            updateOwner:{},
            // 房屋数据
            houses: []
        },
        methods: {

            handleEdit(row) {
                this.editDialogVisible = true;
                //进行回显
                /**
                 * row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，
                 * 导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝。
                 */
                // this.updateOwner = row;
                // JSON.stringify(row) 把 row对象转成了 字符串
                //  JSON.parse() 把字符串转成新对象
                this.updateOwner = JSON.parse(JSON.stringify(row));
            },
            handlerUpdateClose(){
                this.updateOwner = {};
            },
            handlerClose() {
                // alert("我dialog关闭了..");
                this.owner = {};
            },
            // 修改操作
            updateOwnerData(){
                axios({
                    method: "PUT",
                    url: "http://localhost:8080/owner",
                    data: this.updateOwner
                }).then(resp => {
                    // 01 信息提示
                    if (resp.data.code == 100000) {
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        // 02 数据刷新
                        this.findOwner(this.currentPage, this.pageSize,this.tel,this.identity);
                        // 03 关闭dialog
                        this.editDialogVisible = false;
                    }
                })
            },
            // 添加房屋数据
            addOwnerData() {
                axios({
                    method: "POST",
                    url: "http://localhost:8080/owner",
                    data: this.owner
                }).then(resp => {
                    // 01 信息提示
                    if (resp.data.code == 100000) {
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        // 02 数据刷新
                        this.findOwner(this.currentPage, this.pageSize,this.tel,this.identity);
                        // 03 关闭dialog
                        this.addDialogVisible = false;
                    }
                })
            },
            addOwner() {
                this.addDialogVisible = true;
            },
            //条件搜索
            search() {
                this.findOwner(this.currentPage, this.pageSize,this.tel,this.identity);
            },
            // 改变的 size
            handleSizeChange(val) {
                this.pageSize = val;
                this.findOwner(this.currentPage, this.pageSize, this.tel,this.identity);
            },

            //触发改变的currentPage
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findOwner(this.currentPage, this.pageSize, this.tel,this.identity);
            },
            // 勾选后 会触发函数
            // val 是勾选的数组
            handleSelectionChange(val) {
                this.arr = val;
            },
            findOwner(currentPage, pageSize, tel,identity) {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/owner",
                    params: {
                        currentPage: currentPage,
                        pageSize: pageSize,
                        tel: tel,
                        identity: identity
                    }
                }).then(resp => {

                    // this.houses = resp.data.data.data; // 拿到服务器的 回写数据中的data数据的对象中data数据
                    this.owners = resp.data.data.data;
                    this.total = resp.data.data.total;

                })
            },
            findHouse() {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/house/all",
                }).then(resp => {
                    console.log(resp.data);
                    this.houses = resp.data.data;
                })
            }
        },
        created() {
            this.findOwner(1, 2);
            //查询楼宇信息
            this.findHouse();
        }
    });
</script>

</body>
</html>